<template>
  <div class="background">
    <div class="title">
      <Icon type="ios-search"/>
      版权查询
    </div>

    <div style="margin-top: 90px; width: 80%; margin-left: auto; margin-right: auto; min-height: 150px">
      <Row>
        <Col span="3">
          <div @click="select(1)">
            <side-bar-tab :selected="1 === this.selected">模糊搜索</side-bar-tab>
          </div>
          <div @click="select(2)">
            <side-bar-tab :selected="2 === this.selected">精确搜索</side-bar-tab>
          </div>
        </Col>
        <Col span="1">
          <div style="width: 1px;min-height: 150px;background-color: rgba(235, 122, 103, 100); margin-left: 10px"></div>
        </Col>

        <Col span="20" v-show="selected === 1">
          <Row>
            <Col span="18">
              <Input type="text" placeholder="输入作品名称，如：《晴天》" v-model="musicName">
                <div slot="prepend" style="width: 100px">作品名称</div>
              </Input>
              <Input type="text" placeholder="输入词作者，如：周杰伦" class="mar-top-20" v-model="lyricist">
                <div slot="prepend" style="width: 100px">词作者</div>
              </Input>
              <Input type="text" placeholder="输入曲作者，如：周杰伦" class="mar-top-20" v-model="composer">
                <div slot="prepend" style="width: 100px">曲作者</div>
              </Input>
              <Input type="text" placeholder="输入演唱者，如：周杰伦" class="mar-top-20" v-model="singer">
                <div slot="prepend" style="width: 100px">演唱者</div>
              </Input>
            </Col>

            <Col span="3">
              <div @click="search(0)"
                   class="items-background-color"
                   style="cursor: pointer; margin-left: 50px; width: 100px; height: 40px; line-height: 40px;display: flex; text-align: center; justify-content: center">
                <div style="height: 30px; margin-top: 5px">
                  <Icon type="md-arrow-round-forward" size="30"/>
                </div>
                搜索
              </div>
            </Col>
          </Row>
        </Col>

        <Col span="20" v-show="selected === 2">
          <Row>
            <Col span="18">
              <Input type="text" placeholder="输入版权注册码，如：9078****4344" style="" v-model="registrationCode">
                <div slot="prepend" style="width: 100px">版权注册码</div>
              </Input>
            </Col>
            <Col span="3">
              <div @click="search(1)"
                   class="items-background-color"
                   style="cursor: pointer; margin-left: 50px; height: 40px; line-height: 40px; display: flex; text-align: center; justify-content: center">
                <div style="height: 30px; margin-top: 5px">
                  <Icon type="md-arrow-round-forward" size="30"/>
                </div>
                搜索
              </div>
            </Col>
          </Row>
          <Row style="margin-top: 20px">
            <Col span="18">
              <Input type="text" placeholder="输入授权代码，如：3748****2482" style="" v-model="authorizationCode">
                <div slot="prepend" style="width: 100px">授权代码</div>
              </Input>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>

    <div class="mar-top-20" style="width: 80%; margin-left: auto; margin-right: auto;">
      <div>
        <div style="height: 1px; width: 100%" class="items-background-color"></div>
        <div style="height: 50px; line-height: 50px; font-size: 16px;">
          &emsp;&emsp;&ensp;搜索条件：例子：作品名称 - <span class="color0">《test_music》</span>，曲作者 - <span
          class="color0">郭小依</span>
          ，被授方 - <span class="color0">郭丹二</span>
        </div>
        <div style="height: 1px; width: 100%" class="items-background-color"></div>
      </div>

      <!--      模糊搜索结果-->
      <div v-if="searchResult !== null && selected === 1">
        <div v-for="result in searchResult" v-bind:key="result.musicId" style="margin-top: 15px">
          <div style="height: 40px; line-height: 40px; font-size: 18px;"><span v-html="result.musicName"></span></div>

          <Row style="font-size: 16px;">
            <Col span="6">
              <span>版权注册码：{{ result.registrationCode.slice(0,20)+"**" }}</span><br>
              <span>版权所有人：{{ result.ownerName }}</span><br>
              <span>注册时间：{{ result.uploadTime }}</span>
            </Col>
            <Col span="6">
              <span>专辑名称：{{ result.albumName }}</span><br>
              <span>唱片公司：{{ result.recordCompany }}</span><br>
              <span>出版公司：{{ result.publishingCompany }}</span>
            </Col>
            <Col span="6">
              <span>词作者：<span v-html="result.lyricist"></span></span><br>
              <span>曲作者：<span v-html="result.composer"></span></span><br>
              <span>演唱者：<span v-html="result.singer"></span></span>
            </Col>
            <Col span="6">
              <span>歌词文件标识：{{ result.lyricsFile }}</span><br>
              <span>曲谱文件标识：{{ result.opernFile }}</span><br>
              <span>歌曲文件标识：{{ result.musicAddress }}</span>
            </Col>
          </Row>

          <div v-for="(i, index) in result.authorizations" v-bind:key="i.authorizationCode + index"
               style="font-size: 15px; color: grey; margin-top: 10px;">
            <div style="width: 100%; height: 1px; background-color: grey"></div>
            <Row style="margin: 10px auto">
              <Col span="6">
                <span> 授权代码：{{ i.authorizationCode.slice(0,20)+"**" }}</span><br>
                <span>被授权方：{{ i.ownerName }}</span><br>
                <span>授权时间：{{ i.authorizationStartTime }}</span>
              </Col>
              <Col span="12">
                <span>授权类型：{{ i.type }}</span><br>
                <span>授权种类：{{ i.allowType }}</span><br>
                <span>授权地域：{{ i.allowRegion }}</span>
              </Col>
              <Col span="6">
                <span>授权是否有效：{{ i.validStatus === 1 ? '是' : '否' }}</span>
              </Col>
            </Row>
          </div>
          <div style="width: 100%; height: 1px;" class="items-background-color"></div>

        </div>
      </div>

      <!--      精确搜索-->
      <div v-if="searchResult1 !== null && selected === 2">
        <div v-for="result in searchResult1" v-bind:key="result.musicId" style="margin-top: 15px">
          <div style="height: 40px; line-height: 40px; font-size: 18px;"><span v-html="result.musicName"></span></div>

          <Row style="font-size: 16px;">
            <Col span="6">
              <span>版权注册码：{{ result.registrationCode.slice(0,20)+"**" }}</span><br>
              <span>版权所有人：{{ result.ownerName }}</span><br>
              <span>注册时间：{{ result.uploadTime }}</span>
            </Col>
            <Col span="6">
              <span>专辑名称：{{ result.albumName }}</span><br>
              <span>唱片公司：{{ result.recordCompany }}</span><br>
              <span>出版公司：{{ result.publishingCompany }}</span>
            </Col>
            <Col span="6">
              <span>词作者：<span v-html="result.lyricist"></span></span><br>
              <span>曲作者：<span v-html="result.composer"></span></span><br>
              <span>演唱者：<span v-html="result.singer"></span></span>
            </Col>
            <Col span="6">
              <span>歌词文件标识：{{ result.lyricsFile }}</span><br>
              <span>曲谱文件标识：{{ result.opernFile }}</span><br>
              <span>歌曲文件标识：{{ result.musicAddress }}</span>
            </Col>
          </Row>

          <div v-for="(i, index) in result.authorizations" v-bind:key="i.authorizationCode + index"
               style="font-size: 15px; color: grey; margin-top: 10px;">
            <div style="width: 100%; height: 1px; background-color: grey"></div>
            <Row style="margin: 10px auto">
              <Col span="6">
                <span>授权代码：{{ i.authorizationCode.slice(0,20)+"**" }}</span><br>
                <span>被授权方：{{ i.ownerName }}</span><br>
                <span>授权时间：{{ i.authorizationStartTime }}</span>
              </Col>
              <Col span="12">
                <span>授权类型：{{ i.type }}</span><br>
                <span>授权种类：{{ i.allowType }}</span><br>
                <span>授权地域：{{ i.allowrRegion }}</span>
              </Col>
              <Col span="6">
                <span>授权是否有效：{{ i.validStatus === 1 ? '是' : '否' }}</span>
              </Col>
            </Row>
          </div>
          <div style="width: 100%; height: 1px;" class="items-background-color"></div>

        </div>
      </div>

      <!--      与底部隔开-->
      <div style="height: 115px"></div>
    </div>
  </div>
</template>

<script>
import SideBarTab from '@/components/SideBarTab'

export default {
  name: 'CopyrightSearch',
  components: {
    SideBarTab
  },
  data () {
    return {
      selected: 1,
      musicName: '',
      lyricist: '',
      singer: '',
      composer: '',
      searchResult: null,
      searchResult1: null,
      authorizationCode: '',
      registrationCode: '',
      ownerName: '',
      allowRegion: ''
    }
  },
  created () {
    // 由其他组件跳转过来
    if (this.$route.query.flag === true) {
      const query = this.$route.query
      this.musicName = query.musicName
      this.lyricist = query.lyricist
      this.singer = query.singer
      this.composer = query.composer
      this.search(0)
    }
  },
  methods: {
    select (num) {
      this.selected = num
    },
    add () {

    },
    search (num) {
      if (num === 0) {
        this.$get('/search/fuzzySearch', {
          musicName: this.musicName,
          lyricist: this.lyricist,
          singer: this.singer,
          composer: this.composer
        }).then(res => {
          if (res.code === 20000) {
            console.log(res)
            this.searchResult = res.data
          } else {
            this.$Notice.error({
              title: '搜索失败',
              desc: res.message
            })
          }
        })
      } else {
        // exact search
        this.$get('/search/preciseSearch', {
          authorizationCode: this.authorizationCode,
          registrationCode: this.registrationCode
        }).then(res => {
          if (res.code === 20000) {
            console.log(res)
            this.searchResult1 = res.data
          } else {
            this.$Notice.error({
              title: '搜索失败',
              desc: res.message
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
